<template>
    <view class="bg-[#2A2A2A] text-gray-100">
        <!-- 顶部用户信息 -->
        <view class="bg-[#383838] shadow-sm">
            <view class="px-4 py-6 flex items-center">
                <image
                    class="w-16 h-16 rounded-full border-2 border-[#4A4A4A] shadow"
                    :src="userStore.userinfo?.avatar"
                    mode="aspectFill" />
                <view class="ml-4">
                    <text class="text-lg font-semibold block text-white">{{ userStore.userinfo?.username }}</text>
                    <text class="text-gray-300 text-sm">会员等级: 黄金会员</text>
                </view>
            </view>
        </view>

        <!-- 功能入口 -->
        <view class="mt-4 bg-[#383838] rounded-t-lg overflow-hidden">
            <navigator v-for="item in menu" :key="item.name" :url="item.url">
                <view class="px-4 py-3 flex items-center justify-between border-b border-[#4A4A4A] active:bg-[#4A4A4A]">
                    <view class="flex items-center">
                        <view class="w-8 h-8 rounded-full bg-[#4A4A4A] flex items-center justify-center">
                            <text class="text-blue-400 text-lg">{{ item.icon }}</text>
                        </view>
                        <text class="ml-3 text-gray-100">{{ item.name }}</text>
                    </view>
                    <text class="text-gray-400">></text>
                </view>
            </navigator>
        </view>

        <!-- 登出按钮 -->
        <view class="mt-8 px-4">
            <button
                @click="handleLogout"
                class="w-full bg-transparent border border-red-500 text-red-400 rounded-lg font-medium active:bg-[#3A1A1A]">
                退出登录
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const menu = [
    {
        name: "个人信息管理",
        url: "/pages/user_set/user_set",
        icon: "👤"
    },
    {
        name: "我的收藏",
        url: "/pages/collection/collection",
        icon: "❤️"
    }
    // {
    //     name: "我的订单",
    //     url: "/pages/profile/orders",
    //     icon: "📦"
    // },
    // {
    //     name: "设置",
    //     url: "/pages/profile/settings",
    //     icon: "⚙️"
    // }
];

onShow(() => {
    if (!userStore.isLogin) {
        uni.showToast({
            title: "请先登录",
            icon: "none"
        });
        uni.redirectTo({
            url: "/pages/login/login"
        });
    }
});

const handleLogout = () => {
    uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",

        success: res => {
            if (res.confirm) {
                // 执行登出逻辑
                uni.showToast({
                    title: "退出成功",
                    icon: "success"
                });
                userStore.logout();
                uni.switchTab({ url: "/pages/index/index" });
            }
        }
    });
};
</script>

<style scoped lang="scss"></style>
